<template>
	<view class="withdraw-detail">
		<view class="tabs-box">
			<u-tabs
				:list="tabList"
				:current="tabCurrent"
				:scrollable="false"
				lineColor="#323232"
				:activeStyle="{ color: '#030303', fontSize: '30rpx', fontWeight: 'bold' }"
				:inactiveStyle="{ color: '#030303', fontSize: '30rpx' }"
				@change="tabChange"
			></u-tabs>
		</view>
		<view class="list-box">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="left">
					<view class="title">
						<text v-if="item.status == 'review'">审核中</text>
						<text v-else-if="item.status == 'agree'">审核通过</text>
						<text v-else-if="item.status == 'reject'">审核驳回</text>
					</view>
					<view class="time">{{ item.create_time }}</view>
				</view>
				<view class="right">
					<view class="text">-{{ item.amount }}({{ config.trade_currency }})</view>
					<view class="cash">+{{ item.cash }}(元)</view>
					<view class="gold">+{{ item.cash2 }}({{ config.trade_currency_2 }})</view>
				</view>
			</view>
			
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	import { getCashList, getConfig } from '@/api/api'

	export default {
		data () {
			return {
				tabCurrent: 0,
				tabList: [{
					name: '全部',
				}, {
					name: '审核中',
				}, {
					name: '审核通过',
				}, {
					name: '审核驳回',
				}],
				
				config: {},
				
				list: [],
				/* 分页 */
				status: 'loadmore',
				page: 0,
				last_page: 1,
			}
		},
		onLoad () {
			this.loadData()
			
			getConfig().then(res => {
				if (res) {
					this.config = res.data
				}
			})
		},
		onReachBottom () {
			this.getListData()
		},
		methods: {
			loadData () {
				this.page = 0
				this.last_page = 1
				this.list = []
				this.getListData()
			},
			async getListData () {
				if(this.page >= this.last_page) return
			
				this.status = 'loading'
				this.page = ++this.page
			
				const req = await getCashList({
					type: this.tabCurrent,
					page: this.page,
					page_size: 10,
				})
				
				if (req) {
					this.list = this.list.concat(req.data.data)
					this.last_page = req.data.last_page
					
					if (this.page >= this.last_page) {
						this.status = 'nomore'
					} else {
						this.status = 'loading'
					}
					
					return ''
				}
			},
			
			tabChange (e) {
				this.tabCurrent = e.index
				this.loadData()
			}
		}
	}
</script>

<style lang="scss">
.withdraw-detail {
	.tabs-box {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}
	.list-box {
		padding: 0 40rpx;
		.item {
			padding: 40rpx 0;
			display: flex;
			justify-content: space-between;
			&:not(:last-child) {
				border-bottom: 1rpx solid #f1f1f1;
			}
			.left {
				flex: 1;
				.title {
					color: #0b0b0b;
					font-size: 26rpx;
				}
				.time {
					margin-top: 16rpx;
					color: #333;
					font-size: 22rpx;
				}
			}
			.right {
				.text {
					color: #212121;
					font-size: 28rpx;
				}
				.cash {
					margin-top: 12rpx;
					color: #d23020;
					font-size: 24rpx;
				}
				.gold {
					margin-top: 12rpx;
					color: #ff9111;
					font-size: 24rpx;
				}
			}
		}
	}
}
</style>
